<template>
    <div class="home">
        <div class="first">
            <div class="firstTop">
        <span>
            <h6>流水金额</h6>
            <h3>￥{{wzxTotal.flowAmount}}</h3>
             <div class="pay blue" v-if="wzxTotal && wzxTotal.aliTotal">
                    <h6>支付宝支付</h6>
                    <h3>￥{{wzxTotal.aliTotal.aliAmount}}</h3>
                    <h6>笔数：{{wzxTotal.aliTotal.num}}</h6>
                </div>

        </span>
                <span>
            <h6>优惠金额</h6>
            <h3>￥{{wzxTotal.discountAmount}}</h3>
             <div class="pay green" >
                    <h6>微信支付</h6>
                    <h3>￥{{wzxTotal.wxTotal.aliAmount}}</h3>
                    <h6>笔数：{{wzxTotal.wxTotal.num}}</h6>
                </div>

        </span>
                <span>
            <h6>实收金额</h6>
            <h3>￥{{wzxTotal.actualAmount}}</h3>
             <div class="pay orange" v-if="wzxTotal.cashTotal && wzxTotal.cashTotal.aliAmount">
                    <h6>现金支付</h6>
                    <h3>￥{{wzxTotal.cashTotal.aliAmount}}</h3>
                    <h6>笔数：{{wzxTotal.cashTotal.num}}</h6>
                </div>

        </span>
            </div>

        </div>
    <div class="second first">
        <h3>菜品销量{{menuList.num}}（份）</h3>
        <div class="zxf_menu_list" v-if="menuList.menuList.length !== 0">
            <div :key="index" v-for="(item, index) in menuList.menuList"
                 style="margin-right: 10px;width: 190px;height: 130px;border-radius: 10px;background: white;margin-bottom: 10px">
                <img :src="item.image" style="width: 190px;height: 90px ;border-radius: 10px 10px 0 0 ;" />
                <p style="text-align: center;background: white;height: 30px;line-height: 30px;border-radius: 10px;">
                    {{ item.name }}
                </p>
            </div>
        </div>
        <div v-else>
            <el-empty :image-size="50" description="暂无数据"></el-empty>
        </div>
    </div>
    </div>
</template>

<script>
    import {queryTotal} from '@/services/model/orderList'

    export default {
        data() {
            return {
                form: {},
                wzxTotal:{},
                menuList:[],
                dataList: {
                    wzxTotal: {
                        flowAmount: 0,
                        discountAmount: 0,
                        actualAmount: 0,
                        aliTotal: {
                            aliAmount: 0,
                            num: 0
                        }
                    },
                    wxTotal: {
                        aliTotal: {
                            aliAmount: 0,
                            num: 0
                        }
                    },
                    cashTotal: {
                        aliTotal: {
                            aliAmount: 0,
                            num: 0
                        }
                    }
                }
            }
        },
        computed: {},
        methods: {
            async queryList() {

                let {data} = await queryTotal(this.form)


                this.wzxTotal = data.wzxTotal
                this.menuList = data.menuList
                console.log(this.wzxTotal)
            }
        }
        ,
        mounted() {
            this.queryList()
        }
    }
</script>

<style lang="less" scoped>
    .home {
        background: white;
        /*padding: 20px 15px;*/
        width: 100%;
        height: 100vh;
        justify-content: flex-start;

        .first {
            width: 100%;
            padding:30px 45px;
border-bottom: 1px solid #d2d2d2;
            .firstTop {
                display: flex;
                align-items: center;
                justify-content: flex-start;

                span {
                    margin-right: 20px;
                    h6 {
                        font-size: 16px;
                    }

                    h3 {
                        font-size: 30px;
                        color: #ff6b00;
                        font-weight: 600;
                        margin-top: 10px;
                    }

                    .pay {
                        width: 180px;
                        height: 70px;
                        border-radius: 5px;
                        box-sizing: border-box;
                        padding: 10px;
                        color: white;
                        margin-top: 20px;

                        h6 {
                            font-size: 12px;

                        }

                        h3 {
                            font-size: 20px;
                            color: white;
                            margin: 6px 0;
                            font-weight: 500;
                        }
                    }

                    .blue {
                        background-image: linear-gradient(to right, rgb(56, 114, 249), rgb(75, 126, 252));
                    }

                    .green {
                        background-image: linear-gradient(to right, rgb(68, 195, 54), rgb(92, 214, 80));
                    }

                    .orange {
                        background-image: linear-gradient(to right, rgb(255, 135, 12), rgb(254, 162, 57));
                    }
                }
            }
        }
  .second{
      .zxf_menu_list {
          display: flex;
          flex-wrap: wrap;
          margin-top: 10px;
      }
  }
    }
</style>
